<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        /* Sepia effect
-----------------------------------*/

        * {
            box-sizing: border-box;
        }
        html,
        body {
            position: relative;
            height: 100%;
        }
        body {
            margin: 0;
            /* grid columns
        -----------------------------------*/

            padding: 0;
        }
        .col-2 {
            display: block;
            float: left;
            width: calc(100%/2);
        }
        @media (max-width: 480px) {
            .col-2 {
                width: 100%;
            }
        }
        .sepia {
            position: relative;
            overflow: hidden;
            margin: 0;
        }
        .sepia .image img {
            display: block;
            width: 100%;
            -webkit-filter: sepia(1);
            transition: all 800ms 300ms linear;
        }
        .sepia:hover .image img {
            -webkit-filter: sepia(0);
            transition: all 800ms linear;
        }
        .sepia span,
        .sepia span:before,
        .sepia span:after {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.1);
            transition: all 800ms linear;
        }
        .sepia span:after,
        .sepia span:before {
            content: "";
        }
        .sepia span:before {
            transform: translate(0%, 0%);
            transition: all 800ms 300ms linear;
        }
        .sepia span:after {
            transform: translate(0%, 0%);
            transition: all 800ms 300ms linear;
        }
        .sepia:hover span:before {
            transform: translate(0%, 100%);
            transition: all 800ms linear;
        }
        .sepia:hover span:after {
            transform: translate(0%, -100%);
            /* Grayscale effect
        -----------------------------------*/

            transition: all 800ms linear;
        }
        .grayscale {
            position: relative;
            overflow: hidden;
        }
        .grayscale .image img {
            display: block;
            width: 100%;
            -webkit-filter: grayscale(1);
            filter: grayscale(1);
            transition: all 1000ms 300ms linear;
        }
        .grayscale:hover .image img {
            -webkit-filter: grayscale(0);
            filter: grayscale(0);
            transition: all 1000ms 300ms linear;
        }
        .grayscale span,
        .grayscale span:before,
        .grayscale span:after {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.1);
            transition: all 800ms linear;
        }
        .grayscale span:after,
        .grayscale span:before {
            content: "";
        }
        .grayscale span:before {
            transform: translate(0%, 0%);
            transition: all 800ms linear;
        }
        .grayscale span:after {
            transform: translate(0%, 0%);
            transition: all 800ms linear;
        }
        .grayscale:hover span:before {
            transform: translate(100%, 0%);
            transition: all 800ms linear;
        }
        .grayscale:hover span:after {
            transform: translate(-100%, 0%);
            /* Hue-rotate effect
        -----------------------------------*/

            transition: all 800ms linear;
        }
        .hue-rotate {
            position: relative;
            overflow: hidden;
        }
        .hue-rotate .image img {
            display: block;
            width: 100%;
            -webkit-filter: hue-rotate(180deg);
            filter: hue-rotate(180deg);
            transition: all 1000ms 300ms linear;
        }
        .hue-rotate:hover .image img {
            -webkit-filter: hue-rotate(0deg);
            filter: hue-rotate(0deg);
            transition: all 1000ms 300ms linear;
        }
        .hue-rotate span,
        .hue-rotate span:before,
        .hue-rotate span:after {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.1);
            transition: all 800ms linear;
        }
        .hue-rotate span:after,
        .hue-rotate span:before {
            content: "";
        }
        .hue-rotate span:before {
            transform: translate(0%, 0%);
            transition: all 800ms linear;
        }
        .hue-rotate span:after {
            transform: translate(0%, 0%);
            transition: all 800ms linear;
        }
        .hue-rotate:hover span:before {
            transform: translate(100%, 0%);
            transition: all 800ms linear;
        }
        .hue-rotate:hover span:after {
            transform: translate(-100%, 0%);
            /* Invert  effect
        -----------------------------------*/

            transition: all 800ms linear;
        }
        .invert {
            position: relative;
            overflow: hidden;
        }
        .invert .image img {
            display: block;
            width: 100%;
            -webkit-filter: invert(1);
            filter: invert(1);
            transition: all 1000ms 300ms linear;
        }
        .invert:hover .image img {
            -webkit-filter: invert(0);
            filter: invert(0);
            transition: all 1000ms 300ms linear;
        }
        .invert span,
        .invert span:before,
        .invert span:after {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.1);
            transition: all 800ms linear;
        }
        .invert span:after,
        .invert span:before {
            content: "";
        }
        .invert span:before {
            transform: translate(0%, 0%);
            transition: all 800ms linear;
        }
        .invert span:after {
            transform: translate(0%, 0%);
            transition: all 800ms linear;
        }
        .invert:hover span:before {
            transform: translate(0%, 100%);
            transition: all 800ms linear;
        }
        .invert:hover span:after {
            transform: translate(0%, -100%);
            transition: all 800ms linear;
        }
    </style>
</head>
<body>
<div class="row">
    <div class="col-2 sepia">
        <div class="image"><img src="/assets/landing.jpg">
        </div>
        <span></span>
    </div>

    <div class="col-2 grayscale">
        <div class="image"><img src="/assets/landing.jpg">
        </div>
        <span></span>
    </div>
</div>


<div class="col-2 hue-rotate">
    <div class="image"><img src="/assets/landing.jpg">
    </div>
    <span></span>
</div>
</div>


<div class="col-2 invert">
    <div class="image"><img src="/assets/landing.jpg">
    </div>
    <span></span>
</div>
</div>
</body>
</html>